<template>
  <page-view class="page-view" :title="false">
    <div slot="headerContent">
      <a-breadcrumb class="s-breadcrumb">
        <a-breadcrumb-item>排课管理</a-breadcrumb-item>
        <a-breadcrumb-item><nuxt-link
          to="/timetable/TimetableReportIndex"
        >课时统计</nuxt-link></a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 查询和其他操作 -->
    <a-card class="s-card">
      <div class="filter">
        <a-form>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="部门">
                <a-select v-model="listQuery.departmentId" placeholder="请选择">
                  <a-select-option
                    v-for="item in departmentList"
                    :key="item.deptId"
                    :value="item.deptId"
                  >
                    {{ item.deptName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="月份">
                <a-month-picker
                  v-model="listQuery.selectedMonth"
                  :allow-clear="false"
                  placeholder="请选择"
                  :default-value="moment(getCurrentData(), 'YYYY-MM')"
                  @change="onChangeMonth"
                />
              </a-form-item>
            </a-col>
            <a-col :lg="8" />
          </a-row>
          <a-row>
            <a-col :lg="16" :md="24" :sm="24">
              <a-form-item label="职工姓名">
                <a-input
                  v-model="listQuery.name"
                  clearable
                  class="filter-item"
                  placeholder="请输入职工姓名"
                />
              </a-form-item>
            </a-col>

            <a-col :lg="8" :xs="0">
              <a-button type="primary" @click="handleFilter">查找 </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
          <!-- 适配小屏幕 -->
          <a-row>
            <a-col :lg="24" :md="24" :sm="24" style="float:left">
              <div>
                <a-button
                  type="primary"
                  @click="handleApply"
                ><a-icon type="arrow-up" />
                  上报校办
                </a-button>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="0" :md="12" :sm="24">
              <a-button type="primary" @click="handleFilter">查找 </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <!-- 查询结果 -->
        <a-table
          :loading="listLoading"
          :columns="columns"
          class="s-table"
          :data-source="list"
          :row-key="record => record.id"
          :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
          :pagination="false"
          :scroll="{ x: 1800, y: 500 }"
        />
        <!-- 分页器 -->
        <div class="pagination-container">
          <a-pagination
            :page-size="listQuery.pageSize"
            :show-total="
              total =>
                `共 ${total} 条记录 第 ${listQuery.page} / ${Math.ceil(
                  total / listQuery.pageSize
                )} 页`
            "
            :current="listQuery.page"
            :total="total"
            hide-on-single-page
            show-quick-jumper
            @change="getList"
          />
        </div>
      </div>
    </a-card>
  </page-view>
</template>
<style lang="less" scoped>
.index-td {
  width: 70px;
}
.textarea-td {
  width: 31%;
}
</style>
<script>
import { STable, PageView } from '@/components'
import { del } from '@/pages/staff/api/staff'
import { mapState } from 'vuex'
import moment from 'moment'
import { Report } from '@/pages/attendance/api/attendanceApprovalSetting'

export default {
  name: 'TimetableReportIndex',
  components: {
    STable,
    PageView
  },
  async fetch ({ app, store }) {
    if (!app.$get(store, 'state.basic.deptList.length')) {
      app.$departmentListFunc()
    }
  },
  data () {
    return {
      url: '/admin/timetable/salary/page',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        name: '',
        departmentId: 5,
        page: 1,
        pageSize: 20,
        year: 2020,
        month: 2
      },
      downloadLoading: false,
      columns: [
        {
          title: '工号',
          dataIndex: 'staffJobNumber',
          align: 'left',
          width: '70px'
        },
        {
          title: '姓名',
          dataIndex: 'staffName',
          align: 'left',
          width: '67px'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      departmentList: state => state.basic.deptList,
      deptMaps: state => state.basic.deptMaps
    })
  },
  mounted () {
    this.initDate()
    this.getList()
    // this.list = this.dealList(this.list)
  },
  beforeUpdate () {
    const oldList = this.list
    const oldColumns = this.columns
    var newColumns = []
    oldList[0]
      ? oldList[0].details.map((e, i) => {
        newColumns = oldColumns.push({
          title: e.name,
          dataIndex: `details[${i}].value`,
          key: e.field,
          align: 'center',
          width: '80px'
        })
      })
      : null
    console.log(newColumns)
  },
  methods: {
    moment,
    getCurrentData () {
      return new Date().toLocaleDateString()
    },
    initDate () {
      // var nowDateString = this.getCurrentData()
      this.listQuery.month = '12'
      this.listQuery.year = '2019'
    },
    getList (page) {
      this.listQuery.page = page || this.listQuery.page
      this.$fetchList()
      this.onChangeMonth()
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleReset () {
      this.listQuery = {
        page: 1,
        pageSize: 20
      }
      // this.getList()
    },
    handleDownload () {
      // this.downloadLoading = true
      // import('@/vendor/Export2Excel').then(excel => {
      //   const tHeader = ['排序', '产品名称', '默认产品单价', '发布人', '发布时间', '状态']
      //   const filterVal = ['sort', 'productName', 'defaultPrice', 'publishTime', 'status']
      //   excel.export_json_to_excel2(tHeader, this.list, filterVal, '产品信息')
      //   this.downloadLoading = false
      // })
    },
    handleDelete (row) {
      this.$handleBtnClick(del, row.id, '此操作将移除该数据, 是否继续?')
    },
    handleEdit (path) {
      this.$router.push(path)
    },
    onChangeMonth (date, dateString) {
      if (dateString) {
        this.listQuery.month = dateString.split('-')[1]
        this.listQuery.year = dateString.split('-')[0]
      }
    },
    handleApply () {
      this.$handleBtnClick(Report, {
        departmentId: this.listQuery.departmentId,
        year: this.listQuery.year,
        month: this.listQuery.month
      })
    },
    dealList (list) {
      const newList = []
      list[0].map((item, index) => {
        if (item instanceof Array) {
          alert('a')
        } else {
          alert('b')
        }
      })
      return newList
    },
    deal (datas) {
      const columns = []
      Object.keys(datas).map(r => {
        if (r != null) {
          if (Object.prototype.toString.call(datas[r]) === '[object Array]') {
            for (var i = 0; i < datas[r].length; i++) {
              var resultStr = 'details[' + i + '].value'
              columns.push({ title: datas[r][i].name, dataindex: resultStr })
            }
          } else {
            if (r === 'staffJobNumber') {
              columns.push({ title: '工号', dataIndex: r })
            } else if (r === 'staffName') {
              columns.push({ title: '名字', dataIndex: r })
            }
          }
        }
      })
      console.log(columns)
      return columns
    }
  }
}
</script>
